<template>
    <div>
        <h2>会员列表</h2>
        <input type="button" value="添加会员" @click="adduser" />
        <div>
            会员名称:<input type="text" v-model="que.name" />
            会员等级:<select v-model="que.levelid">
                <option value="">请选择</option>
                <option :value="item.Id" v-for="item in xlk.list" :key="item.Id">{{ item.Name }}</option>
            </select>
            <input type="button" value="查询" @click="show" class="btn btn-info" />
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>会员名称</td>
                    <td>会员电话</td>
                    <td>身份证</td>
                    <td>会员等级</td>
                    <td>积分</td>
                    <td>余额</td>
                    <td>生日</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>{{ item.Id }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.Phone.substring(0, 3) + "****" + item.Phone.substring(7) }}</td>
                    <td>{{ item.Card }}</td>
                    <td>
                        <span v-if="item.LevelId == 1">青铜会员</span>
                        <span v-if="item.LevelId == 3">白银会员</span>
                        <span v-if="item.LevelId == 4">黄金会员</span>
                    </td>
                    <td>{{ item.Score }}</td>
                    <td style="color: red;">￥{{ item.Money.toFixed(2) }}</td>
                    <td>{{ moment(item.Birthday).format("YYYY-MM-DD HH:mm:ss") }}</td>
                    <td>{{ item.Sex == 1 ? "男" : "女" }}</td>
                    <td>{{ item.State == 1 ? "可用" : "禁用" }}</td>
                    <td><input type="button" value="修改" @click="update(item.Id)" class="btn btn-danger" />
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger" />
                    </td>
                </tr>
            </tbody>
        </table>







    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import moment from 'moment';
const router = useRouter();

const adduser = () => {
    router.push("/adduser")
}
onMounted(() => {
    show();
    getList();
})

let data: any = reactive({
    list: []
})
let que: any = reactive({
    name: '',
    levelid: ''
})
let xlk: any = reactive({
    list: []
})



const update=(id:any)=>{
    router.push({
        path:'/updateuser',
        query:{id:id}
    })
}



const del = (id: any) => {
    let f = confirm("确认删除?");
    if (f == true) {
        axios({
            method: "delete",
            url: '/api/User/Del',
            params: { id: id }
        })
        .then((res)=>{
    console.log(res);
    if(res.data>0){
        alert("删除成功");
        show();
    }
  })
  .catch((err)=>{
    console.log(err);
  })

    }
}


const show = () => {
    axios({
        method: 'get',
        url: '/api/User/ShowUser',
        params: que
    })
        .then((res) => {
            console.log(res);
            data.list = res.data;
        })
        .catch((err) => {
            console.log(err);
        });
}





const getList = () => {
    axios({
        method: 'get',
        url: '/api/User/ShowLevel'
    })
        .then((res) => {
            console.log(res);
            xlk.list = res.data;
        })
        .catch((err) => {
            console.log(err);
        });
}
</script>

<style scoped></style>